Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,body { margin:0px; padding:0px; background-color : #fff; }
#canvas{
position: absolute;
width: 650px;
height: 650px;
background-color : #fff;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/tenten.gif);
color:red;
font-weight:bold;
}
#month1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 40px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#month2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 80px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#day1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 170px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#day2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 210px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#hour1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 300px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#hour2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 340px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#minute1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 430px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
color:red;
font-weight:bold;
}
#minute2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 470px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#second1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 560px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#second2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 600px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}

console.log("Event Fired")
    var newYearTime = '1419984000'; //Wed, 01 Jan 2014 00:00:00 GMT. Timstamp
    var currentTime = moment().format('X'); //Thu, 24 Jan 2013 13:00:00 GMT. Timestamp

var diffTime = newYearTime - currentTime; //better to handle this in Controller to avoid timezone problem
    var duration = moment.duration(diffTime, 'seconds');
    var interval = 1;

setInterval(function () {
        duration = moment.duration(duration.asSeconds() - interval, 'seconds');

var _url = "http://www.chabudai.org/temp/wonderfl/honehone/img/";

var month1;
        month = duration.months();
        if(month < 10){
          month1 = 0;
        }else{
          month1 = Math.floor(month / 10);
        }

var month2 = month%10;
      
        var day1;
        day = duration.days();
        if(day < 10){
          day1 = 0;
        }else{
          day1 = Math.floor(day / 10);
        }

var day2 = day%10;
    
        var hour1;
        hour = duration.hours();
        if(hour < 10){
          hour1 = 0;
        }else{
          hour1 = Math.floor(hour / 10);
        }

var hour2 = hour%10;
    
        var minute1;
        minute = duration.minutes();
        if(minute < 10){
          minute1 = 0;
        }else{
          minute1 = Math.floor(minute / 10);
        }

var minute2 = minute%10;
    
        var second1;
        second = duration.seconds();
        if(second < 10){
          second1 = 0;
        }else{
          second1 = Math.floor(second / 10);
        }
        var second2 = second%10;

$('#month1').css("background-image", "url("+_url+"h" + month1 + ".gif)");
        $('#month2').css("background-image", "url("+_url+"hh" + month2 + ".gif)").text('Months');
        $('#day1').css("background-image", "url("+_url+"h" + day1 + ".gif)");
        $('#day2').css("background-image", "url("+_url+"hh" + day2 + ".gif)").text('Days');
        $('#hour1').css("background-image", "url("+_url+"h" + hour1 + ".gif)");
        $('#hour2').css("background-image", "url("+_url+"hh" + hour2 + ".gif)").text('Hours');
        $('#minute1').css("background-image", "url("+_url+"m" + minute1 + ".gif)");
        $('#minute2').css("background-image", "url("+_url+"mm" + minute2 + ".gif)").text('Minutes');
        $('#second1').css("background-image", "url("+_url+"s" + second1 + ".gif)");
        $('#second2').css("background-image", "url("+_url+"ss" + second2 + ".gif)").text('Seconds');
  }
, 1000);

Frontend Forever App